<template>
  <view class="perfect-info__dialog">
    <UniPopup
      ref="perfectInfoDialog"
      borderRadius="32rpx 32rpx 0 0"
      backgroundColor="#fff"
      @maskClick="maskClick"
    >
      <view class="dialog-container">
        <view class="dialog-header">
          <text>完善资料</text>
          <!-- <view class="icon-wrap" @click="closePopup">
            <text class="ali-icon">&#xe641;</text>
          </view> -->
        </view>
        <UploadAvatar v-model="avatarUrl" :customStyle="{ marginBottom: '50rpx' }" />
        <BasicsForm @register="handleRegister" @submit="formSubmit" />
      </view>
    </UniPopup>
  </view>
</template>

<script setup lang="ts">
  import { useUserStore, useUserStoreWithOut } from '@/store/modules/user';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { storeToRefs } from 'pinia';
  import { getCurrentInstance, ref, unref, watch } from 'vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm } from '@/components/Form';
  import UploadAvatar from './UploadAvatar.vue';
  import { perfectUserInfo } from '@/api/mine';
  import { onUnload } from '@dcloudio/uni-app';
  import { SexEnum } from '@/enums/loginEnum';

  const { userInfo } = useUserStore()

  const [register, { clearValidate, setFieldsValue }] = useForm({
    labelPosition: 'left',
    labelAlign: 'left',
    validateTrigger: 'bind',
    labelWidth: 100,
    isScrollToError: false,
    btnGroupOptions: {
      position: 'static',
      submit: {
        text: '提交',
        type: 'primary',
        customClass: 'br-50',
      },
    },
    schemas: [
      {
        field: 'name',
        label: '姓名',
        component: 'Nickname',
        required: true,
      },
      {
        field: 'sex',
        label: '性别',
        component: 'RadioGroup',
        required: true,
        defaultValue: SexEnum.MALE,
        componentProps: {
          localdata: [
            { text: '男', value: SexEnum.MALE },
            { text: '女', value: SexEnum.FEMALE },
          ],
        },
      },
      {
        field: 'companyName',
        label: '单位名称',
        component: 'Input',
      },
      {
        field: 'companyPositionName',
        label: '单位职务',
        component: 'Input',
      },
    ],
  });

  const avatarUrl = ref('');

  function handleRegister(e: any) {
    register(e)

    setFieldsValue({
      name: userInfo.name,
      avatar: userInfo.avatar,
      companyName: userInfo.companyName,
      companyPositionName: userInfo.companyPosition,
      sex: userInfo.sex
    })
  }

  async function formSubmit(vals: Recordable) {
    // if (!unref(avatarUrl)) {
    //   return Toast('请选择头像');
    // }
    const { name, companyName, companyPositionName, sex } = vals;
    await perfectUserInfo({
      name,
      avatar: unref(avatarUrl),
      companyName,
      companyPositionName,
      sex
    });
    await useUser.setUserInfo();
    closePopup();
  }

  const _this = getCurrentInstance();

  const useUser = useUserStoreWithOut();

  const { isShowPerfectInfoDialog } = storeToRefs(useUser);

  watch(isShowPerfectInfoDialog, (val) => {
    val ? openPopup() : closePopup();
  });

  const openPopup = () => {
    (_this?.refs['perfectInfoDialog'] as any).open('bottom');
  };

  const closePopup = () => {
    (_this?.refs['perfectInfoDialog'] as any).close('bottom');
    maskClick();
  };

  function maskClick() {
    useUser.setIsShowPerfectInfoDialog(false);
  }

  onUnload(() => {
    useUser.setIsShowPerfectInfoDialog(false);
  });
</script>

<style lang="scss" scoped>
  .perfect-info__dialog {
    position: relative;
    z-index: 999;
    .dialog {
      &-container {
        border-radius: 32rpx 32rpx 0 0;
      }
      &-header {
        font-size: 32rpx;
        height: 96rpx;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
        .icon-wrap {
          width: 100rpx;
          height: 100%;
          text-align: right;
          line-height: 96rpx;
        }
        .ali-icon {
          color: #999996;
          font-size: 32rpx;
        }
      }
    }
  }
</style>
